<template>
    <div class="collectlist">
         <div class="head">
            <van-nav-bar
            title="收藏"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="contentbox">
            <div class="title">我的收藏</div>
        </div>
         <div class="sortlist">
            <van-grid :column-num="2" :gutter="5">
                <van-grid-item  v-for=" item in collectlist" :key="item.id" :to="`/cart/goods?id=${item.id}`" >
                    <van-image :src="item.list_pic_url"  class="img"/>
                    <p class="name">{{item.name}}</p>
                    <p class="price">￥{{item.retail_price}}</p>
                </van-grid-item>
            </van-grid>
        </div>

    </div>
</template>

<script>
 
import {listAction}  from "@/api/collected"
    export default {
        data() {
            return {
                collectlist:[]
            }
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
            },
        },
        created(){
            listAction({
                openId:localStorage.getItem('openId')
            }).then((res) => {
                console.log(res);
                this.collectlist=res.collectGoodsList
            })
        }
    }
</script>

<style lang="scss" scoped>
.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox {
    margin-top: 50px;
    background-color: #eee;
}

@mixin guid-sty{

    .img{
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .name{
        margin: 7.5px 12px 0;
        text-align: center;
        padding: 0 10px;
        font-size: 12px;
    }
    .price{
        text-align: center;
        font-size: 15px;
        color: #b4282d;
        margin-bottom: 0;
    }
}

.title{
    padding: 10px 0;
    text-align: center;
    background: #fff;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
}
.sortlist{
    @include guid-sty;
}

</style>